<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>$Title$</title>

  <style>
      .demo a{
        float: left;
        display: block;
        height: 50px;
        width: 50px;
        border-radius: 10px;
        background: aqua;
        text-align: center;
        color: black;
        text-decoration: none;
        margin-right: 5px;
        font: bold 20px/50px Arial;
      }

      /*存在id属性的元素 a[]  */
      /*具体到属性类型*/
      a[id]{
        background: red;
      }
      /*具体到个体*/
      a[id=first]{
        background: antiquewhite;
      }
      /*   = :绝对等于
            *= ：包含
            ^= 以这个开头
            $= 以结尾的元素
       */
      a[class *="last"]{
        background: red;
      }
    /* 选中href中以http开头的元素   */
      a[href^=http]{
        background: aquamarine;
      }
      /* 选中href中以pdf结尾的元素   */
      a[href$=pdf]{
        background: black;
      }
  </style>




</head>
<body>

<p class="demo">
  <a href="https://www.baidu.com" class="links item first" id="first">1</a>
  <a href="http"class="links item active" target="_blank" title="test">2</a>
  <a href="css/123.html" class="links item">3</a>
  <a href="css/123.png" class="links item">4</a>
  <a href="css/123.jpg" class="links item">5</a>
  <a href="abc" class="links item">6</a>
  <a href="/a.pdf" class="links item">7</a>
  <a href="/abc.pdf" class="links item">8</a>
  <a href="abc.doc" class="links item">9</a>
  <a href="abcd.doc" class="links item last">10</a>

</p>








</body>
</html>